<!--模板开始-->
<style type="text/css">

*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: white;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container > div,#container > img
{
    position: absolute;
}

@-webkit-keyframes dian
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    50%  {-webkit-transform: translate(0px,-50px);opacity: 1}
    100% {-webkit-transform: translate(0px,-100px);opacity: 0}

}
.yezi1
{
    left: 22px;
    top: 267px;
    position: absolute;
}
.yezi2
{
    left: 5px;
    top: 129px;
    position: absolute;
}
#potdiv
{
    width: 500px;
    height: 150px;
    /*background-color: #fff;*/
}
@-webkit-keyframes pot
{
    0%    {opacity: 0}
    50%   {opacity: 0.6}
    100%  {opacity: 0}
}


@-webkit-keyframes fadeout
{
    0%   {opacity: 1}
    50%  {opacity: 0}
    100% {opacity: 0}
}
@-webkit-keyframes fade1
{
    from  {opacity: 1}
    to    {opacity: 0.6}
}
.pot
{
    left: 239px;
    top: 563px;
    width: 30px;
    -webkit-animation: potting 2s linear infinite;
}
@-webkit-keyframes potting
{
    0%   {opacity: 0}
    40%  {opacity: 1}
    48%  {opacity: 0.5}
    56%  {opacity: 1}
    64%  {opacity: 0.5}
    72%  {opacity: 1}
    /*80%  {opacity: 1}*/
    100% {opacity: 0}
}
#xindiv
{
    width: 500px;
    height: 200px;
    top: 274px;
    left: -100px;
}
@-webkit-keyframes myfadein
{
    0%   {-webkit-transform: translate(0px,-280px) rotate(-12deg);opacity: 0}
    40%  {-webkit-transform: translate(0px,-50px) rotate(-2deg);opacity: 1;}
    80%  {-webkit-transform: translate(0px,20px) rotate(-2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    100% {-webkit-transform: translate(0px,150px) rotate(8deg);opacity: 0}
}
@-webkit-keyframes titlein
{
    from  {opacity: 1}
    to    {opacity: 1}
}
@-webkit-keyframes xinmove
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    10%  {-webkit-transform: translate(30px,0px);opacity: 1}
    90%  {-webkit-transform: translate(250px,0px);opacity: 1}
    100% {-webkit-transform: translate(280px,0px);opacity: 0}

}
@-webkit-keyframes titleout
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1);opacity: 1}
    to    {-webkit-transform: translate(0px,100px) scale(1,0);opacity: 0}
}
.div
{
    border: 0px solid #fff;
    opacity: 1;
}
.divframe
{
    border: 30px solid transparent;
    border-image:url({$skinurl}skin/dongri/kuangheng.png) 30 30 30 30;
    opacity: 0;

}

@-webkit-keyframes div_in
{
    0%   {-webkit-transform: translate(0px,-280px) rotate(-12deg);opacity: 0}
    40%  {-webkit-transform: translate(0px,-50px) rotate(-2deg);opacity: 1;}
    80%  {-webkit-transform: translate(0px,20px) rotate(-2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    100% {-webkit-transform: translate(0px,150px) rotate(8deg);opacity: 0}

}
@-webkit-keyframes div_in3
{
    0%   {-webkit-transform: translate(0px,280px) rotate(-12deg);opacity: 0}
    40%  {-webkit-transform: translate(0px,50px) rotate(-2deg);opacity: 1;}
    80%  {-webkit-transform: translate(0px,-20px) rotate(-2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    100% {-webkit-transform: translate(0px,-150px) rotate(8deg);opacity: 0}

}
@-webkit-keyframes div_in1
{
    0%   {-webkit-transform: scale(0,0) rotate(-12deg);opacity: 0}
    20%  {-webkit-transform: scale(1,1) rotate(-2deg);opacity: 1;}
    40%  {-webkit-transform: scale(0.9,0.9) rotate(2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    60%  {-webkit-transform: scale(1,1) rotate(-2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    80%  {-webkit-transform: scale(0.9,0.9) rotate(2deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    100% {-webkit-transform: scale(0,0) rotate(8deg);opacity: 0}

}
@-webkit-keyframes div_in2
{
    0%   {-webkit-transform: scale(0,0) rotate(-12deg);opacity: 0}
    20%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;}
    25%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    30%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    35%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    40%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    45%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    50%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    55%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    60%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    65%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    70%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    75%  {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    80%  {-webkit-transform: scale(1,1) rotate(-0.1deg);opacity: 1;-webkit-animation-timing-function: ease-in;}
    100% {-webkit-transform: scale(1,1) rotate(0.1deg);opacity: 0}

}
.wordspan
{
    width: 86%;
    right: 8%;
    position: absolute;
    color: #fff;
    font-size: 25px;
    text-align: center;
    bottom: 15%;
    text-shadow: 1px 1px 2px #000;
    font-weight: bold;
}
.xuedi
{
    top:533px ;
}
.dian1
{
    left: -100px;
    top:  -100px ;
    position: absolute;
    -webkit-animation: dian1 6s ease-in-out infinite both;
}
@-webkit-keyframes dian1
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(15px,15px)}
    100% {-webkit-transform: translate(0px,0px)}

}
.dian2
{
    left: 0px;
    top:  -170px ;
    width: 300px;
    height:300px;
    position: absolute;
    -webkit-animation: dian2 4s ease-in-out infinite both;
}
@-webkit-keyframes dian2
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(0px,15px)}
    100% {-webkit-transform: translate(0px,0px)}

}
.dian3
{
    left: 400px;
    top:  -150px ;
    position: absolute;
    -webkit-animation: dian3 6s ease-in-out infinite both;
}
@-webkit-keyframes dian3
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(-15px,15px)}
    100% {-webkit-transform: translate(0px,0px)}

}
.dian4
{
    left: -100px;
    top:  580px ;
    width: 300px;
    height:300px;
    position: absolute;
    -webkit-animation: dian4 6s ease-in-out infinite both;
}
@-webkit-keyframes dian4
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(15px,-15px)}
    100% {-webkit-transform: translate(0px,0px)}

}
.dian5
{
    left: 420px;
    top:  600px ;
    width: 100px;
    height:100px;
    position: absolute;
     -webkit-animation: dian5 6s ease-in-out infinite both;
}
@-webkit-keyframes dian5
{
    0%{-webkit-transform: scale(1,1)}
    50% {-webkit-transform: scale(1.2,1.2)}
    100% {-webkit-transform: scale(1,1)}

}
.ling1
{
    left: 110.35px;
    top:  84.5px ;
    width: 40px;
    height:40px;
    overflow: hidden;
    position: absolute;
    -webkit-transform-origin:center top;
    -webkit-animation: ling1 2s linear infinite both;
}
@-webkit-keyframes ling1
{
    0%{-webkit-transform: rotate(0deg)}
    50% {-webkit-transform: rotate(-20deg)}
    100% {-webkit-transform: rotate(0deg)}

}
.ling2
{
    left: 374.75px;
    top:  65.5px ;
    width: 40px;
    height:40px;
    position: absolute;
    -webkit-transform-origin:center top;
    -webkit-transform-origin: rotate(-50deg);
    -webkit-animation: ling1 2.5s  linear infinite both;
}
@-webkit-keyframes ling2
{
    0%{-webkit-transform: rotate(-50deg)}
    50% {-webkit-transform: rotate(-70deg)}
    100% {-webkit-transform: rotate(-50deg)}

}
.baidian1
{
    left: 114.35px;
    top:  112.5px ;
    width: 12px;
    height:12px;
    position: absolute;
    -webkit-animation: baidian1 2s linear infinite both;
}
.baidian2
{
    left: 379.75px;
    top:  93.5px ;
    width: 12px;
    height:12px;
    position: absolute;
    -webkit-animation: baidian2 2.5s   linear infinite both;
}
@-webkit-keyframes baidian1
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(33px,0px)}
    100% {-webkit-transform: translate(0px,0px)}

}
@-webkit-keyframes baidian2
{
    0%{-webkit-transform: translate(0px,0px)}
    50% {-webkit-transform: translate(33px,0px)}
    100% {-webkit-transform: translate(0px,0px)}

}
.shan1
{
    left: 160.75px;
    top:  49.5px ;
    position: absolute;
    -webkit-animation: shan1 5s ease-in-out infinite both;
}
@-webkit-keyframes shan1
{
    0%{-webkit-transform: scale(0,0) rotate(0deg)}
    50% {-webkit-transform: scale(3,3) rotate(45deg)}
    100% {-webkit-transform: scale(0,0) rotate(0deg)}

}
.shan2
{
    left: 245.75px;
    top:  29.5px ;
    position: absolute;
    -webkit-animation: shan1 4s ease-in-out infinite both;
}
.shan3
{
    left: 312.75px;
    top:  21.5px ;
    position: absolute;
    -webkit-animation: shan3 4s 1s ease-in-out infinite both;
}
@-webkit-keyframes shan3
{
    0%{-webkit-transform: scale(0,0) rotate(0deg)}
    50% {-webkit-transform: scale(1,1) rotate(80deg)}
    100% {-webkit-transform: scale(0,0) rotate(0deg)}

}
.shan4
{
    left: 370.75px;
    top:  15.5px ;
    position: absolute;
    -webkit-animation: shan3 3s ease-in-out infinite both;
}
.shan5
{
    left: 0px;
    top:  668px ;
    position: absolute;
    -webkit-animation: shan5 4s ease-in-out infinite both;
}
@-webkit-keyframes shan5
{
    0%{-webkit-transform: scale(0,0) rotate(0deg)}
    50% {-webkit-transform: scale(2,2) rotate(45deg)}
    100% {-webkit-transform: scale(0,0) rotate(0deg)}

}
.shan6
{
    left: 188px;
    top:  570px ;
    position: absolute;
    -webkit-animation: shan3 5s ease-in-out infinite both;
}
.shan7
{
    left: 200px;
    top:  572px ;
    position: absolute;
    -webkit-animation: shan7 4s ease-in-out infinite both;
}
.shan8
{
    left: 195px;
    top:  580px ;
    position: absolute;
    -webkit-animation: shan7 4s ease-in-out infinite both;
}
@-webkit-keyframes shan7
{
    0%{-webkit-transform: scale(0,0) rotate(0deg)}
    50% {-webkit-transform: scale(0.5,0.5) rotate(45deg)}
    100% {-webkit-transform: scale(0,0) rotate(0deg)}

}
/*本模板及源代码为深圳量子云科技有限公司版权所有,侵权必究*/
.shan9
{
    left: 190px;
    top:  730px ;
    position: absolute;
    -webkit-animation: shan3 5s ease-in-out infinite both;
}
.shan10
{
    left: 215px;
    top:  708px ;
    position: absolute;
    -webkit-animation: shan3 5s ease-in-out infinite both;
}
.shan11
{
    left: 260px;
    top:  730px ;
    position: absolute;
    -webkit-animation: shan3 4s 1s ease-in-out infinite both;
}
.shan12
{
    left: 370px;
    top:  730px ;
    position: absolute;
    -webkit-animation: shan3 4s ease-in-out infinite both;
}
.shan13
{
    left: 300px;
    top:  760px ;
    position: absolute;
    -webkit-animation: shan3 4s 4s ease-in-out infinite both;
}
.shan14
{
    left: 435px;
    top:  660px ;
    position: absolute;
    -webkit-animation: shan3 4s 2s ease-in-out infinite both;
}
.xuehua1
{
    left: 50px;
    top:  -300px ;
    position: absolute;
    -webkit-animation: xuehua1 15s linear infinite both;
}
@-webkit-keyframes xuehua1
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(60px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua2
{
    left: 100px;
    top:  -300px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua2 20s linear infinite both;
}
@-webkit-keyframes xuehua2
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(100px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua3
{
    left: 200px;
    top:  -300px ;
    width: 36px;
    height:36px;
    position: absolute;
    -webkit-animation: xuehua3 15s 1s linear infinite both;
}
@-webkit-keyframes xuehua3
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(150px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua4
{
    left: 400px;
    top:  -300px ;
    position: absolute;
    -webkit-animation: xuehua4 12s linear infinite both;
}
@-webkit-keyframes xuehua4
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(50px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua5
{
    left: 50px;
    top:  -50px ;
    position: absolute;
    -webkit-animation: xuehua1 15s linear infinite both;
}
@-webkit-keyframes xuehua1
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(60px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua6
{
    left: 100px;
    top:  -50px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua2 20s linear infinite both;
}
@-webkit-keyframes xuehua2
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(100px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua7
{
    left: 200px;
    top:  -50px ;
    width: 36px;
    height:36px;
    position: absolute;
    -webkit-animation: xuehua3 15s 1s linear infinite both;
}
@-webkit-keyframes xuehua3
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(150px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua8
{
    left: 400px;
    top:  -50px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua4 12s linear infinite both;
}
@-webkit-keyframes xuehua4
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    50% {-webkit-transform: translate(50px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1200px) rotate(360deg)}

}
.xuehua9
{
    left: 400px;
    top:  -550px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua6 22s linear infinite both;
}
.xuehua10
{
    left: 200px;
    top:  -550px ;
    width: 36px;
    height:36px;
    position: absolute;
    -webkit-animation: xuehua5 15s 1s linear infinite both;
}

.xuehua11
{
    left: 100px;
    top:  -550px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua6 20s linear infinite both;
}
.xuehua12
{
    left: 50px;
    top:  -550px ;
    width: 24px;
    height:24px;
    position: absolute;
    -webkit-animation: xuehua5 20s linear infinite both;
}
@-webkit-keyframes xuehua5
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    40% {-webkit-transform: translate(60px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(100px,1500px) rotate(360deg)}

}
@-webkit-keyframes xuehua6
{
    0%{-webkit-transform: translate(0px,0px) rotate(0deg)}
    40% {-webkit-transform: translate(-150px,600px) rotate(180deg)}
    100% {-webkit-transform: translate(20px,1500px) rotate(360deg)}

}
.wordspan
{
    width: 84%;
    right: 7%;
    position: absolute;
    color: #fff;
    font-size: 25px;
    text-align: center;
    bottom: 8%;
    text-shadow: 1px 1px 2px #000;
    font-weight: bold;
}
</style>

<div id='container'>
    <img src='{$skinurl}skin/dongri/xuebg.jpg'>
    <div id='divf1' class = 'divframe'>
        <div id='div1' class='div'>
        </div>
        <div id='word1' class='wordspan'></div>
    </div>
    <div id='divf2' class = 'divframe'>
        <div id='div2' class='div'>
        </div>
        <div id='word2' class='wordspan'></div>
    </div>
    <img class = 'xuedi' src='{$skinurl}skin/dongri/xuedi.png'>
    <img class = 'xueding' src='{$skinurl}skin/dongri/xueding.png'>
    <img id = 'dian1' class='dian1' src='{$skinurl}skin/dongri/dian.png'>
    <img id = 'dian2' class='dian2' src='{$skinurl}skin/dongri/dian.png'>
    <img id = 'dian3' class='dian3' src='{$skinurl}skin/dongri/dian.png'>
    <img id = 'dian4' class='dian4' src='{$skinurl}skin/dongri/dian.png'>
    <img id = 'dian5' class='dian5' src='{$skinurl}skin/dongri/dian.png'>
    <img id = 'baidian1' class='baidian1' src='{$skinurl}skin/dongri/baidian.png'>
    <img id = 'baidian2' class='baidian2' src='{$skinurl}skin/dongri/baidian.png'>
    <img id = 'ling1' class='ling1' src='{$skinurl}skin/dongri/ling.png'>
    <img id = 'ling2' class='ling2' src='{$skinurl}skin/dongri/ling.png'>
    <img id = 'shan1' class='shan1' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan2' class='shan2' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan3' class='shan3' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan4' class='shan4' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan5' class='shan5' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan6' class='shan6' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan7' class='shan7' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan8' class='shan8' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan9' class='shan9' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan10' class='shan10' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan11' class='shan11' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan12' class='shan12' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan13' class='shan13' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'shan14' class='shan14' src='{$skinurl}skin/dongri/shan.png'>
    <img id = 'xuehua1' class='xuehua1' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua2' class='xuehua2' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua3' class='xuehua3' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua4' class='xuehua4' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua5' class='xuehua5' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua6' class='xuehua6' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua7' class='xuehua7' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua8' class='xuehua8' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua9' class='xuehua9' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua10' class='xuehua10' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua11' class='xuehua11' src='{$skinurl}skin/dongri/xuehua.png'>
    <img id = 'xuehua12' class='xuehua12' src='{$skinurl}skin/dongri/xuehua.png'>
    <div id='pagetitle' style='position:absolute;top:280px;left:89px;opacity:0;width:323px;height:200px'>
        <img style='position:absolute;left:-45px;top:-45px' src='{$skinurl}skin/dongri/kuangheng.png'>
        <div id='titlediv' style='position:absolute;width:288px;height:150px;top:22px;left:17px;overflow:hidden;display:table;'>
            <div id='titlecontent' style='width:288px;height:150px;vertical-align:middle;display:table-cell;text-align:center;font-size:26px;line-height:50px;color:#fff;'></div>
        </div>
    </div>



</div>

<script>

function  id (name)
{
    return document.getElementById(name);
}

function rand(min,max)
{
    return min+Math.floor(Math.random()*(max-min+1));
}

function showtitle()
{
    id('pagetitle').style.webkitAnimation = 'myfadein 7s linear both';
    id('titlecontent').innerHTML = e_title;
    id('titlediv').style.webkitAnimation = 'titlein 4s 0.1s linear both';
}

function kuxuan()
{
    timeout[3] = setTimeout(show1,1000)
}

function show1()
{
    setImage('1');
    id('divf1').style.webkitAnimation = 'div_in 8s linear both';
    id('divf2').style.webkitAnimation = '';
    timeout[1] = setTimeout(show2, 8000)
}

function show2()
{
    setImage('2');
    id('divf2').style.webkitAnimation = 'div_in1 8s linear both';
    id('divf1').style.webkitAnimation = '';
    timeout[2] = setTimeout(show3, 8000)
}
function show3()
{
    setImage('1');
    id('divf1').style.webkitAnimation = 'div_in2 8s linear both';
    id('divf2').style.webkitAnimation = '';
    timeout[4] = setTimeout(show4, 8000)
}
function show4()
{
    setImage('2');
    id('divf2').style.webkitAnimation = 'div_in3 8s linear both';
    id('divf1').style.webkitAnimation = '';
    timeout[5] = setTimeout(show1, 8000)
}


function loading ()
{
    load_images();

}

function setImage(idname)
{

    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div = id('div'+idname);

    div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div.style.backgroundRepeat = "no-repeat";
    var divf = id('divf'+idname);

    divf.style.backgroundRepeat = "no-repeat";


    var word = id('word' + idname);
    var str = words[get_pid(Onload_imgs_url[image_url_index])];
    if(str != undefined)
    {
        word.innerHTML = str;
    }
    else
    {
        word.innerHTML = '';
    }
    //
    //500 760
    if(img_bili < (380/600))
    {
        var height = 600;
        var width = 600 * img_bili;
        var top = 80;
        var left = (500-width)/2;
    }
    else if(img_bili <= 1)
    {
        var width = 420;
        var height = 420 / img_bili;
        var left = 40;
        var top = (740-height)/2
    }
    else if(img_bili > 1)
    {
        var width = 480;
        var height = 480/img_bili;
        var left = 10;
        var top = (760-height)/2;
    }

    divf.style.width = width + 'px';
    divf.style.height = height + 'px';
    divf.style.left = left + 'px';
    divf.style.top = top + 'px';
    divf.style.backgroundSize = (width-60) + 'px ' + (height-60) + 'px';
    div.style.width = (width-60) + 'px';
    div.style.height = (height-60) + 'px';
    div.style.left = '0px';
    div.style.top =   '0px';
    div.style.position = 'absolute';
    div.style.backgroundSize = (width-60) + 'px ' + (height-60) + 'px';


    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}


//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        {
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    step_load();
}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num == step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num == step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }

    }
}
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=5000;
var timeout = [];

call_me(loading);


function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i]);
    }

    var itemlist = ['pagetitle','titlediv','divf1','divf2'];

    for(var i =0; i<itemlist.length;i++)
    {
        id(itemlist[i]).style.webkitAnimation = '';
    }

}
</script>
<!-- 模板结束 -->